/**
 * 商品组件
 */
import React from 'react'
import { View, Text, Image } from '@tarojs/components'
import classNames from 'classnames'
import {track, jump, moduleUtil} from '@conecli/cone-render/api'
import {LazyLoadImage, ItemViewExposureSmart } from '@conecli/cone-render/components'
import commonSkuStyle from './index.module.scss'

const outStockImg =
	'https://img11.360buyimg.com/zx/jfs/t19549/121/1310536493/6474/20f41712/5ac43facNc2868231.png'

const Product = (props) => {
	const { floorData } = props
	const goodsItems = moduleUtil.getDataDefine(floorData, 'goodsItem')
	const products = goodsItems.data
  const jdJumpToProduct = (index, item) => {
    const getLogInfo = track.getIsvClickEventInfo(
      floorData,
      {
        clickArea: `sku`,
        skuid: `${item?.skuId}`,
        tagList: item?.tagList ? item?.tagList : [],
        labelList: item?.labelList ? item?.labelList : [],
        pos: `${index}`,
      },
      {
        la_p: `${index}`,
      },
    )
    jump.business.jdJumpToProduct(item.skuId, getLogInfo)
  }
	return (
		<View className={commonSkuStyle['d-common-sku']}>
			<View className={commonSkuStyle['d-sku-list']}>
				{products.map((item, index) => {
					const isOffShelf = parseInt(item.price) === -1
          // 组装埋点上报信息，mInfo说明详见文档MInfoData定义
          const mInfo = {
            pos: index,
            busid: floorData.moduleId,
            skuid: item.skuId,
            labelList: item?.labelList ?? [],
            tagList: item?.tagList ?? [],
          }
          return (
						<ItemViewExposureSmart
							className={commonSkuStyle['d-sku-item']}
							key={item.skuId}
              onClick={jdJumpToProduct.bind(this, index, item)}
              reportData={[floorData, mInfo, {}]}
						>
							<View className={commonSkuStyle['d-sku-img']}>
								<LazyLoadImage
									className={commonSkuStyle['d-img']}
									isSkuImage
									src={
										item?.customImageUrl
											? item?.customImageUrl
											: item?.imageUrl
									}
								/>
								{isOffShelf ? (
									<>
										<Image
											className={
												commonSkuStyle[
												'd-out-stock-img'
												]
											}
											src={outStockImg}
										/>
										<Image
											className={
												commonSkuStyle[
												'd-out-stock-img'
												]
											}
											src={outStockImg}
										/>
									</>
								) : null}
							</View>
							{item?.tag1 || item?.tag2 ? (
								<View
									className={classNames(
										commonSkuStyle['d-sku-tag'],
									)}
								>
									{item?.tag1}
									{item?.tag2}
								</View>
							) : null}
							<View className={commonSkuStyle['d-sku-name']}>
								<Text
									className={classNames(
										'text-ellipsis-2-no-omit',
										commonSkuStyle['d-name'],
										isOffShelf
											? commonSkuStyle['d-gray-color']
											: '',
									)}
								>
									{item?.customSkuName
										? item?.customSkuName
										: item?.skuName}
								</Text>
							</View>
							{item.price ? (
								<View
									className={
										commonSkuStyle['d-sku-price-container']
									}
								>
									<View className={commonSkuStyle['d-mini-price']}>
										<Text className={commonSkuStyle['d-yec-sys']}>
											￥
										</Text>
										<Text className={commonSkuStyle['d-yec-dec']}>
											{item.price}
										</Text>
									</View>
								</View>
							) : null}
							{isOffShelf ? (
								<View
									className={commonSkuStyle['d-out-stock']}
								/>
							) : null}
						</ItemViewExposureSmart>
					)
				})}
			</View>
		</View>
	)
}

export default Product
